<template>
	<view class="boxa">
		<view class="top_kbox">
			<block v-for="(item,i) in listdata" :key="i">
				<view class="ibox" @tap="alertnum(i)" :class="[i== index1?'actives':'']">
					<text class="uni_14">{{(!!label[i])?label[i]:item.name}}</text>
					<image v-if="i != index1" class="ii" src="/static/img/unit/choose-Cade/choose-Cadex.png" mode="">
					</image>
					<image v-else class="ii" src="/static/img/unit/choose-Cade/choose-Cades.png" mode=""></image>
				</view>
			</block>
		</view>
		<view :class="[show?'list_boxs2':'list_boxs']">
			<view class="lione">
				<block v-for="(item,i) in listchild" :key="i">
					<view class="mli" @tap="chooseOne(i)">
						<text :class="[i== index2?'actives':'']" class="uni_14">{{item.name}}</text>
						<image v-if="i == index2" class="ii" src="/static/img/unit/choose-Cade/choose-Cadecc.png"
							mode="">
						</image>
					</view>
				</block>
			</view>
			<view class="hideA" @tap="hide">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['list'], //数据数组
		data() {
			return {
				label: [], // 第一层展现第二层选项选中的name
				show: false,
				index1: null, // 第一层选中index
				index2: null, // 第二层选中index
				listchild: [], // 参数数据 - 子项数据
			}
		},
		computed: {
			listdata() {
				return this.list;
			},
		},
		methods: {
			alertnum(i) {
				let _self = this;
				if (this.index1 != i) {
					this.listchild = [];
					this.index1 = i;
					this.listchild = this.listdata[i].children;
					this.index2 = null;
					this.show = true;
					this.listchild.forEach((item, index) => {
						item.name == _self.label[_self.index1];
						if (item.name == _self.label[_self.index1]) {
							_self.index2 = index
						}
					})
				}

			},
			chooseOne(i) {
				this.index2 = i;
				this.label[this.index1] = this.listchild[i].name; // 二层选中后一层显示
				// this.listdata[this.i1] = this.listchild[i];
				this.$emit('chooseLike', [this.index1, this.index2])
				this.hide();
			},
			hide() {
				this.show = false;
				this.index1 = null;
				this.index2 = null;
			}
		},
		watch: {
			list: {
				handler(item, index) { //监听到数据变化执行方法 
					this.listData = item;
				},
				deep: true // 深度监听父组件传过来对象变化 
			}
		}
	}
</script>

<style>
	.hideA {
		height: calc(100% - 310upx);
	}

	.mli {
		/* border: 1upx solid red; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 22upx 0;
	}

	.lione {
		background-color: #fff;
		/* height: 262upx; */
		/* padding: 10upx 40upx; */
		padding: 80upx 40upx 10upx 40upx;
	}

	.list_boxs {
		background-color: rgba(84, 80, 80, 0.48);
		position: fixed;
		height: calc(100%);
		width: 100%;
		z-index: 88;
		transition: all .5s;
		transform: translateY(-120%);
	}

	.list_boxs2 {
		background-color: rgba(84, 80, 80, 0.48);
		position: fixed;
		height: calc(100%);
		width: 100%;
		z-index: 88;
		transform: translateY(0);
		transition: all .5s;
	}

	.ii {
		width: 30upx;
		height: 30upx;
		display: block;
		margin-left: 12upx;
	}

	.actives {
		color: #F0AD4E;
	}

	.ibox {
		display: flex;
		align-items: center;
	}

	.top_kbox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		padding: 28upx 5%;
		position: fixed;
		/* top: 42px; */
		width: 100%;
		z-index: 99;
		/* #ifdef APP-PLUS */
		top: 0;
		/* #endif */
		border: none;
		border-bottom: 1px solid #e5e5e5;
	}

	.boxa {
		/* padding-top: 84upx; */
		/* position: relative; */
	}
</style>
